<%@ page language="java" import="java.util.*,com.mlqsknow.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/WEB-INF/tlds/messageTag.tld" prefix="msg"%>
<%@ taglib uri="/WEB-INF/tlds/pageTag.tld" prefix="page"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title><msg:message key="menu.status" /></title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="description" content="状态">
	<!-- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
	<!-- 底部加载js -->
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
	function gotoMonitor() {
		document.form2.submit();
	}
	</script>
	
	<style type="text/css">
		.battery-li {position: relative; display: inline-block; width: 50px; height: 25px; border: 1px solid #27A6FF; background: #fff; border-radius: 3px;}
		.battery-li .li-head {position: absolute; width: 3px; height: 9px; background: #27A6FF; left: 51px; top: 7px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
		.battery-li .li-cont {position: absolute; top: 1px; left: 1px; height: 21px; background: #27A6FF; border-radius: 3px;}
		
		.battery-li-0 .li-cont { width: 0; }
		.battery-li-1 .li-cont { width: 5px; }
		.battery-li-2 .li-cont { width: 10px; }
		.battery-li-3 .li-cont { width: 15px; }
		.battery-li-4 .li-cont { width: 20px; }
		.battery-li-5 .li-cont { width: 25px; }
		.battery-li-6 .li-cont { width: 30px; }
		.battery-li-7 .li-cont { width: 35px; }
		.battery-li-8 .li-cont { width: 40px; }
		.battery-li-9 .li-cont { width: 45px; }
		.battery-li-10 .li-cont { width: 50px; }
	</style>
  </head>
  
  <body>
  <div class="header">
		<div class="left header-logo"><img class="header-logo-img" src="images/header_logo.png" /></div>
		<div class="right header-nav">
			<a class="nav-link" href="${pageContext.request.contextPath }/main.do">
				<i class="icon icon-home"></i>
				<span class="link-text"><msg:message key="menu.homepage" /></span>
			</a>
			<c:if test="${menubean.menu1 }">
			<a class="nav-link" href="${pageContext.request.contextPath }/showDevice.do">
				<i class="icon icon-install"></i>
				<span class="link-text"><msg:message key="menu.install" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu2 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/showConfig.do">
				<i class="icon icon-config"></i>
				<span class="link-text"><msg:message key="menu.config" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu3 }">
			<!-- <a class="nav-link" href="operation.html">
				<i class="icon icon-operation"></i>
				<span class="link-text">操作</span>
			</a> -->
			<a class="nav-link" href="${pageContext.request.contextPath}/dataNew.do">
				<i class="icon icon-data"></i>
				<span class="link-text"><msg:message key="menu.data" /></span>
			</a>
			</c:if>
			<%-- <c:if test="${menubean.menu4 }">
			<a class="nav-link" href="history.html">
				<i class="icon icon-history"></i>
				<span class="link-text">历史</span>
			</a>
			</c:if> --%>
			<c:if test="${menubean.menu4 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/faultList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text"><msg:message key="menu.error" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu5 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/showUserList.do">
				<i class="icon icon-customer-management"></i>
				<span class="link-text"><msg:message key="menu.user" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu6 }">
			<a class="nav-link active" href="${pageContext.request.contextPath}/statusList.do">
				<i class="icon icon-status"></i>
				<span class="link-text"><msg:message key="menu.status" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu7 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/currentList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text"><msg:message key="menu.current" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu8 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/report.do">
				<i class="icon icon-history"></i>
				<span class="link-text"><msg:message key="menu.report" /></span>
			</a>
			</c:if>
			<a class="nav-link" href="${pageContext.request.contextPath}/logout.do">
				<i class="icon icon-out"></i>
				<span class="link-text"><msg:message key="menu.exit" /></span>
			</a>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>

	<div class="section">
		<div class="page-mainbox" style="margin-bottom: 10px;">
		<form id="form1" name="form1" action="${pageContext.request.contextPath}/statusList.do" method="post">
			<span style="font-size: medium;"><msg:message key="dtu.code" />：</span><input type="text" style="width:200px;height:32px;" maxlength="20" id="panId" name="panId" value="${panId }"/>  
			<span style="font-size: medium;"><msg:message key="light.code" />：</span><input type="text" style="width:200px;height:32px;" maxlength="20" id="lightNum" name="lightNum" value="${lightNum }"/>  
			<input type="hidden" id="pageSize" name="pageSize" />
			<input type="hidden" id="nowPage" name="nowPage" />
			<input class="btn btn-primary" type="submit" value="<msg:message key="status.btn.search" />" />
			<input class="btn btn-primary" type="button" onclick="gotoMonitor();" value="<msg:message key="status.btn.monitor" />" />
		</form>
		<form id="form2" name="form2" target="_blank" action="${pageContext.request.contextPath}/statusListMonitor.do" method="post">
			<input type="hidden" id="panId" name="panId" value="${panId }"/>  
			<input type="hidden" id="lightNum" name="lightNum" value="${lightNum }"/>  
		</form>
		</div>
		<div class="mui-table page-mainbox">
			<table>
				<thead>
					<tr>
						<th width="25"><msg:message key="dtu.code" /></th>
						<th width="25"><msg:message key="light.code" /></th>
						<th width="46"><msg:message key="light.status.collecttime" /></th>
						<th width="30"><msg:message key="light.status.title" /></th>
						<th width="50"><msg:message key="light.status.temperature" />（℃）</th>
						<th width="50"><msg:message key="light.status.solarpanelvol" />（V）</th>
						<th width="50"><msg:message key="light.status.batteryquantity" />（%）</th>
						<th width="50"><msg:message key="light.status.chargecurrent" />（mA）</th>
						<th width="50"><msg:message key="light.status.workcurrent" />（mA）</th>
						<th width="50"><msg:message key="light.status.workvol" />（V）</th>
						<th width="50"><msg:message key="light.status.chargecount" />（Ah）</th>
						<th width="50"><msg:message key="light.status.workcount" />（Ah）</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="status" items="${page.dataList }">
					<tr>
						<td><div class="td-cont td-center">${status.panId }</div></td>
						<td><div class="td-cont td-center">${status.lightNum }</div></td>
						<td><div class="td-cont td-center">${status.collectTime }</div></td>
						<td><div class="td-cont td-center">
						<c:if test="${status.statusCode eq '10'}"><msg:message key="light.status.type.idle" /></c:if>
						<c:if test="${status.statusCode eq '20'}"><msg:message key="light.status.type.charge" /></c:if>
						<c:if test="${status.statusCode eq '30'}"><msg:message key="light.status.type.workdown" /></c:if>
						<c:if test="${status.statusCode eq '31'}"><msg:message key="light.status.type.workon" /></c:if>
						<c:if test="${status.statusCode eq '40'}"><msg:message key="light.status.type.workover" /></c:if>
						<c:if test="${status.statusCode eq 'A1'}"><msg:message key="light.status.type.undervol" /></c:if>
						<c:if test="${status.statusCode eq 'A2'}"><msg:message key="light.status.type.opencircuit" /></c:if>
						<c:if test="${status.statusCode eq 'A3'}"><msg:message key="light.status.type.overload" /></c:if>
						<c:if test="${status.statusCode eq 'A4'}"><msg:message key="light.status.type.configerror" /></c:if>
						<c:if test="${status.statusCode eq 'A5'}"><msg:message key="light.status.type.batteryerror" /></c:if>
						</div></td>
						<td><div class="td-cont td-center">${status.temperature }</div></td>
						<td><div class="td-cont td-center">${status.solarPanelVol }</div></td>
						<td><div class="td-cont td-center">
						<div class="battery-li li-full battery-li-${status.batteryVolLevel}">
							<span class="li-cont"></span>
							<i class="li-head"></i>
						</div>
						<%-- ${status.batteryVol } --%></div></td>
						<td><div class="td-cont td-center">${status.chargeCurrent }</div></td>
						<td><div class="td-cont td-center">${status.workCurrent }</div></td>
						<td><div class="td-cont td-center">${status.workVol }</div></td>
						<td><div class="td-cont td-center">${status.chargeCount }</div></td>
						<td><div class="td-cont td-center">${status.workCount }</div></td>
					</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<!-- <div class="mui-operation">
			<a href="javascript:;" class="btn orange-btn">导出</a>
		</div> -->
		<div class="block20"></div>
		<!-- <div>
			<nav aria-label="Page navigation example">
				<ul class="pagination justify-content-center">
					<li class="page-item disabled">
					<a class="page-link" href="#" tabindex="-1">上一页</a>
					</li>
					<li class="page-item"><a class="page-link" href="#">1</a></li>
					<li class="page-item"><a class="page-link" href="#">2</a></li>
					<li class="page-item"><a class="page-link" href="#">3</a></li>
					<li class="page-item"><a class="page-link" href="#">4</a></li>
					<li class="page-item"><a class="page-link" href="#">5</a></li>
					<li class="page-item"><a class="page-link" href="#">6</a></li>
					<li class="page-item"><a class="page-link" href="#">7</a></li>
					<li class="page-item"><a class="page-link" href="#">8</a></li>
					<li class="page-item">
					<a class="page-link" href="#">下一页</a>
					</li>
				</ul>
			</nav>
		</div> -->
		<page:pageDown totalSize="${page.totalSize }" pageSize="${page.pageSize }" form="form1" nowPage="${page.nowPage }"/>
	</div>
  </body>
</html>
